import React, { useEffect } from 'react'
import { VideoWrapper } from './style'
import { connect } from 'react-redux'
import { getCategoryAsyncAction } from '../../store/modules/video'
// import VideoInfo from './VideoInfo'
import VideoCategory from './VideoCategory'
import VideoPlayer from './VideoPlayer'
import VideoTool from './VideoTool'

export function Video (props) {
  useEffect(() => {
    props.getCategory()
  }, [])
  return (
    <VideoWrapper>
      <div className='player'>
        <div className='player-left'>
          {/* <VideoInfo></VideoInfo> */}
          <VideoPlayer></VideoPlayer>
          <VideoTool></VideoTool>
        </div>
        <div className='player-right'>
          <VideoCategory></VideoCategory>
        </div>
      </div>
    </VideoWrapper>
  )
}


const mapStateToProps = (state) => ({
  category: state.video.category
})
const mapDispatchToProps = (dispatch) => ({
  getCategory () {
    dispatch(getCategoryAsyncAction())
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(Video)